<!--  -->
<template>
  <div class="member-page">
    <div class="member-info">
      <div class="flex-a-c">
        <div class="image">
            <van-image
            width="56px"
            height="56px"
            round
            :src="memberDetail.member && memberDetail.member.avatar_image"
          />
        </div>
        
        <div class="info">
          <h3 class="ell">{{memberDetail.member && memberDetail.member.nickname}}</h3>
          <div class="tag">{{memberDetail.member && memberDetail.member.role}}</div>
        </div>
      </div>
    </div>
    <div class="member-details">
      <h3>数据统计</h3>
      <div class="member-statistics flex">
        <div class="statistics-box">
          <h4>累计客户群总数量</h4>
          <p>{{memberDetail.group_count}}</p>
        </div>
        <div class="statistics-box">
          <h4>昨日新增群数量</h4>
          <p>{{memberDetail.yesterday_group_count}}</p>
        </div>
        <div class="statistics-box">
          <h4>累计观看总人数</h4>
          <p>{{memberDetail.watch_count}}</p>
        </div>
        <div class="statistics-box">
          <h4>昨日观看总人数</h4>
          <p>{{memberDetail.yesterday_watch_count}}</p>
        </div>
        <div class="statistics-box">
          <h4>累计红包发放数量</h4>
          <p>{{memberDetail.reward_count}}</p>
        </div>
        <div class="statistics-box">
          <h4>昨日红包发放数量</h4>
          <p>{{memberDetail.yesterday_reward_count}}</p>
        </div>
        <div class="statistics-box">
          <h4>累计答题总次数</h4>
          <p>{{memberDetail.reply_count}}</p>
        </div>
        <div class="statistics-box">
          <h4>昨日答题次数</h4>
          <p>{{memberDetail.yesterday_reply_count}}</p>
        </div>
        <div class="statistics-box">
          <h4>会员总数量</h4>
          <p>{{memberDetail.group_member_count}}</p>
        </div>
        <div class="statistics-box">
          <h4>昨日新增会员人数</h4>
          <p>{{memberDetail.yesterday_group_member_count}}</p>
        </div>
      </div>
    </div>
    <footer-tabbar></footer-tabbar>
    
    
  </div>
</template>

<script>
import member_controller from "./member_controller.js";
export default member_controller;
</script>
<style lang="scss" scoped>
.ell {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;

  /* 定义显示的行数 */
  overflow: hidden;
}

/* @import url(); 引入公共css类 */
.member-info {
  padding: 1.25rem 1.125rem 3.125rem 1.125rem;
  background: linear-gradient(354deg, #fbeaea 0%, #fee9e9 59%, #fafafa 100%);

  .info {
    padding: 0 0  0 0.5rem;
    text-align: left;

    .image {
      min-width: 3.5rem;
    }

    h3 {
      font-weight: bold;
      color: #00001c;
      font-size: 1rem;
    }

    .tag {
      margin: 0.3125rem 0 0  0;
      display: inline-block;
      border-radius: 0.9375rem 0.9375rem 0.9375rem 0.9375rem;
      border: 0.0625rem solid #3b3b4a;
      padding: 0.1875rem 0.5rem;
      line-height: 0.75rem;
      font-size: 0.75rem;
      color: #6e6e79;
    }
  }
}

.member-details {
  margin: 0 0.75rem;
  padding: 1.25rem 0.75rem 0 0.75rem;
  background-color: #fff;
  border-radius: 0.625rem 0.625rem 0.625rem 0.625rem;
  position: relative;
  top: -2.125rem;

  h3 {
    font-size: 1rem;
    line-height: 1rem;
    font-weight: bold;
    color: #00001c;
    text-align: left;
    padding-bottom: 1.3125rem;
  }

  .member-statistics {
    flex-wrap: wrap;

    .statistics-box {
      width: 50%;
      text-align: left;
      padding: 0 0 1.625rem 0;

      h4 {
        color: #6e6e79;
        font-size: 0.75rem;
        line-height: 0.75rem;
        padding: 0 0 0.5rem 0;
      }

      p {
        font-weight: bold;
        color: #00001c;
        font-size: 1rem;
        line-height: 1rem;
        display: inline-block;
      }

      &:nth-child(n + 2) {
        padding: 0 0 1.1875rem 0;
      }
    }
  }
}

</style>